<template>
  <div>
    <p style="color: white">1</p>
    <van-nav-bar
      :fixed="true"
      title="iPad mini"
      left-text="返回"
      @click-left="onClickLeft"
      left-arrow
    />
    <van-swipe :autoplay="5000">
      <van-swipe-item v-for="(image, index) in SwiperImg" :key="index">
        <img :src="image" style="width: 100%" @click="sceneImg(SwiperImg,index)">
      </van-swipe-item>
    </van-swipe>
    <van-panel title="iPad mini" desc="IOS7 6+64GB 平板电脑 苹果" status="2499元">
    </van-panel>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import {ImagePreview} from 'vant';

export default {
  name: "productDetails",
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  data() {
    return {
      SwiperImg: [
        "https://image.zoutl.cn/hexo-blog/images/homeBlogImage/1.jpg",
        "https://image.zoutl.cn/hexo-blog/images/homeBlogImage/2.jpg",
        "https://image.zoutl.cn/hexo-blog/images/homeBlogImage/3.jpg",
        "https://image.zoutl.cn/hexo-blog/images/homeBlogImage/4.jpg",
        "https://image.zoutl.cn/hexo-blog/images/homeBlogImage/5.jpg"
      ]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    sceneImg(images, index) {
      ImagePreview({
        images: images, //需要预览的图片 URL 数组
        showIndex: true, //是否显示页码
        loop: true, //是否开启循环播放
        startPosition: index, //图片预览起始位置索引
        closeable: true //是否显示关闭按钮
      })
    },
  }
}
</script>

<style scoped>

</style>
